﻿@model MileageStats.Web.Models.VehicleDetailsViewModel
           
@if (!Html.IsRenderingForMustache())
{
    Layout = "~/Views/Shared/_Layout.Mobile.cshtml";
    ViewBag.Title = "Details for " + @Model.Vehicle.Name;
}
    <nav>
        <ol class="title">
            <li><a href="@Url.Action("Index", "Dashboard")" class="dashboard icon only"><span>Dashboard</span></a></li>
            <li>@Mustache.ViewBag("VehicleName")</li>
        </ol>

        <ol class="tabs vehicle-details" >
            <li><a href="@Url.UnencodedAction("Details", "Vehicle", new { vehicleId = Mustache.RouteValue("vehicleId") })" class="selected">Details</a></li>
            <li><a href="@Url.UnencodedAction("List", "Fillup", new { vehicleId = Mustache.RouteValue("vehicleId") })">Fill Ups</a></li>
            <li><a href="@Url.UnencodedAction("List", "Reminder", new { vehicleId = Mustache.RouteValue("vehicleId") })">Reminders</a></li>
        </ol>
    </nav>
@{Html.RenderPartial("_Flash.Mobile");}
@using (var section = Mustache.Section("Model"))
{
    <div class="view">
        <h2>Vehicle</h2>
        <ol class="list">
            <li>Name: @Mustache.Value(m => m.Vehicle.Name)</li>
            <li>Year: @Mustache.Value(m => m.Vehicle.Year)</li>
            <li>Make: @Mustache.Value(m => m.Vehicle.MakeName)</li>
            <li>Model: @Mustache.Value(m => m.Vehicle.ModelName)</li>
        </ol>
        <h2>Statistics</h2>
        <div class="stats">
            <dl>
				<dt class="mpg-label">MPG</dt>
				<dd class="mpg">@Mustache.Value(model => model.Statistics.AverageFuelEfficiency)</dd>
				<dt class="mile-label">/mile</dt>
				<dd class="mile">@Mustache.Value(model => model.Statistics.AverageCostToDrive)</dd>
				<dt class="month-label">/month</dt>
				<dd class="month">@Mustache.Value(model => model.Statistics.AverageCostPerMonth)</dd>
			</dl>
		</div>
		<h2>Last 12 Months</h2>
        <dl class="details">
            <!-- 
                The following three charts will show up as broken images if there are not fillups 
                for this vehicle. We leave this to you to implement a fix for this situation.
                Possible fixes: 
                1) Check for more than 1 fillup and only then show charts
                2) Replace broken charts with text suggesting user should add fillups
            -->
            <dt>Average fuel efficiency</dt>
            <dd><img src="@Url.UnencodedAction("GetChartImage", "Chart", new { UserId = Mustache.Value(m=>m.UserId), ChartName = "FuelEfficiency", StartDate = DateTime.Now.AddYears(-1), EndDate = DateTime.Now, VehicleIds = Mustache.RouteValue("vehicleId"), Ticks = Mustache.Value(m=>m.DateTimeTicks) })" /></dd>
            <dt>Total distance travelled</dt>
            <dd><img src="@Url.UnencodedAction("GetChartImage", "Chart", new { UserId = Mustache.Value(m => m.UserId), ChartName = "TotalDistance", StartDate = DateTime.Now.AddYears(-1), EndDate = DateTime.Now, VehicleIds = Mustache.RouteValue("vehicleId"), Ticks = Mustache.Value(m => m.DateTimeTicks) })" /></dd>
            <dt>Total cost</dt>
            <dd><img src="@Url.UnencodedAction("GetChartImage", "Chart", new { UserId = Mustache.Value(m => m.UserId), ChartName = "TotalCost", StartDate = DateTime.Now.AddYears(-1), EndDate = DateTime.Now, VehicleIds = Mustache.RouteValue("vehicleId"), Ticks = Mustache.Value(m => m.DateTimeTicks) })" /></dd>
        </dl>
		<h2>Edit Vehicle</h2>
		<p>If you wish to edit the name or any other details specific to this vehicle you may do so by pressing the button below.</p>
		<ol class="button-group">
			<li><a href="@Url.UnencodedAction("Edit", "Vehicle", new { vehicleId = Mustache.Value(m => m.Vehicle.VehicleId) })"><span>Edit vehicle details</span></a></li>
		</ol>
    
    </div>
}